<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="../css/my.css">
</head>

<body>
    <!-- 导航栏 -->
    <nav class="ui segment my-shadow-small">
        <div class="ui container">
            <div class="ui menu stackable">
                <a href="#" class="item my-font-dark my-font-blod my-font-large "><i class="icon home"></i>首页</a>
                <a href="/blog" class="item my-font-dark my-font-blod my-font-large"><i class="icon book"></i>博客</a>
                <a href="/type" class="item my-font-dark my-font-blod my-font-large active"><i class="icon flag"></i>分类</a>
                <a href="/tag" class="item my-font-dark my-font-blod my-font-large"><i class="icon tag"></i>标签</a>
                <a href="#" class="item my-font-dark my-font-blod my-font-large"><i class="icon user"></i>归档</a>
                <div class="right item">
                    <form action="/admin/blog/s">
                        <div class="ui icon input">
                            <i class="search icon"></i>
                            <input type="text" placeholder="搜索..." name="content">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </nav>
    <!-- 中间部分 -->
    <div class="my-container-max" id="container">
        <!-- container是为了适应手机端 -->
        <div class="ui container">
            <!-- 顶部栏 -->
            <div class="ui top attached segment">
                <div class="ui middle aligned two column grid">
                    <div class="column">
                        <h3 class="ui header">分类</h3>
                    </div>
                    <div class="right aligned column">
                        共<h2 class="my-inline-block ui header teal c-side-padding-mini">{{types.length}}</h2>个
                    </div>
                </div>
            </div>

            <!-- 分类一栏 -->
            <div class="ui attached segment">
                <div class="ui labeled  button my-margin-tiny" v-for="type in types">
                    <a href="" class="ui teal basic button">{{type.typeName}}</a>
                    <div class="ui basic teal label left pointing">13</div>
                </div>

            </div>
            <!-- 文章列表 -->
            <div class="ui teal top attached segment my-tb-margin-huge">
                <div class="ui attached  segment">
                    <div class="ui padded vertical segment my-lr-margin-middle" v-for="blog in blogs">
                        <div class="ui mobile reversed stackable grid">
                            <div class="eleven wide column">
                                <h3 class="ui header">
                                    <div href="" class="ui label ribbon red">{{blog.flag}}</div>{{blog.title}}
                                </h3>
                                <div class="my-tb-margin-middle">
                                    <p>{{blog.description}}
                                    </p>
                                </div>
                                <div class="ui stackable grid">
                                    <div class="eleven wide column">
                                        <div class="ui link list horizontal">
                                            <div class="item"><img
                                                    src="https://picsum.photos/seed/picsum/100/100"
                                                    class="ui avatar image">
                                                <div class="header">iron5</div>
                                            </div>
                                            <div class="item"><i class="calendar icon"></i>{{blog.updateTime}}</div>
                                            <div class="item"><i class="icon eye"></i>{{blog.viewCount}}</div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href="#" target="_blank" class="ui label basic">{{blog.type.typeName}}</a>
                                        <div class="my-tb-margin-small">
                                            <a href="" class="ui label teal left pointing" v-for="tag in blog.tags">{{tag.tagName}}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="five wide column">
                                <a href="" target="_blank">
                                    <img src="https://picsum.photos/seed/picsum/800/450"
                                         class="ui rounded image">
                                </a>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="ui divider"></div>
                <div class="ui segment attached">
                    <div class="ui grid centered aligned my-tb-margin-small">
                        <div class="ui pagination menu teal">
                            <a class=" item">
                                上一页
                            </a>
                            <a class="active item">
                                1
                            </a>
                            <div class="disabled item">
                                ...
                            </div>
                            <a class="item">
                                10
                            </a>
                            <a class=" item">
                                下一页
                            </a>
                        </div>
                    </div>
                </div>
            </div>
             </div>
    </div>
    <!-- 底部栏 -->
    <footer class="ui segment inverted vertical c-font-opacity-light" >
        <div class="ui center aligned container ">
            <div class="ui grid divided inverted stackable">
                <div class="three wide column">
                    <img src="./static/img/watercolor.png" class="ui image rounded centered"
                        style="width: 10em;width: 10em">
                </div>
                <div class="seven wide column right floated">
                    <h4 class="ui header inverted">最新博客</h4>
                    <p>学了忘忘了学学了还得忘。。。学了忘忘了学学了还得忘。。。学了忘忘了学学了还得忘。。。学了忘忘了学学了还得忘。。。</p>
                </div>
            </div>
            <div class="center aligned row">
                <div class="ui segment inverted">kahsdkfjhsdkfhasksdjhf</div>
            </div>

        </div>
    </footer>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../semanticUI/semantic.min.js"></script>
    <script>
        const container = new Vue({
                el:"#container",
                data:{
                    blogs:'',
                    tags:'',
                    types:'',
                    pageRequest:{
                        pageNum:1,
                        pageSize:6
                    }
                },
                methods:{
                    getBlogs(){
                        let _this = this;
                        axios.get("/admin/blog/getBlogs?pageNum="+
                            this.pageRequest.pageNum+"&pageSize="+this.pageRequest.pageSize).then(
                            function(response){
                                _this.page=response.data;
                                _this.blogs = response.data.content;
                            }
                        )
                    },
                    getTypes(){
                        let _this = this;
                        axios.get("/admin/type/getTypes").then(
                            function(response){
                                _this.types = response.data;
                            }
                        )
                    },
                    getTags(){
                        let _this = this;
                        axios.get("/admin/tag/getTags").then(
                            function(response){
                                _this.tags = response.data;
                            }
                        )
                    }
                },
                mounted(){
                    this.getBlogs();
                    this.getTypes();
                }
            })
    </script>
</body>

</html>